<template>
  <div>
    <div class="topic">
      <div class="box" v-for="item in topicList" :key="item.id">
        <img class="pic" :src="item.scene_pic_url" alt="" />
        <div class="title">{{ item.title }}</div>
        <div class="tip">{{ item.subtitle }}</div>
        <div class="price">{{ item.price_info | RMBformat }}起</div>
      </div>
      <van-pagination
        v-model="currentPage"
        :page-count="2"
        mode="simple"
        @change="pageChange()"
      />
    </div>
  </div>
</template>

<script>
import { GetTopicList } from "@/request/api";
export default {
  data() {
    return {
      size: 10,
      topicList: [], //请求获取的当前页专题数据
      currentPage: 1, //当前页数
    };
  },
  created() {
    GetTopicList({
      page: this.currentPage,
      size: this.size,
    }).then((res) => {
      console.log(res.data);
      this.topicList = res.data.data;
    });
  },
  methods: {
    pageChange() {
      GetTopicList({
        page: this.currentPage,
        size: this.size,
      }).then((res) => {
        console.log(res.data);
        this.topicList = res.data.data;
      });
      setTimeout(() => {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-bottom: 1rem;
  .box {
    width: 100%;
    background-color: #fff;
    margin-bottom: 0.1rem;
    text-align: center;
    margin: 0 0 0.2rem;
    padding: 0 0 0.1rem;
    .pic {
      width: 100%;
      display: block;
    }
    .title {
      font-size: 18px;
      margin: 0.1rem 0;
    }
    .tip {
      font-size: 16px;
      margin: 0.2rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      font-size: 14px;
      color: brown;
      margin: 0 0 0.1rem;
    }
  }
}
</style>